<!--
  -  Copyright 2020-2021 Huawei Technologies Co., Ltd.
  -
  -  Licensed under the Apache License, Version 2.0 (the "License");
  -  you may not use this file except in compliance with the License.
  -  You may obtain a copy of the License at
  -
  -      http://www.apache.org/licenses/LICENSE-2.0
  -
  -  Unless required by applicable law or agreed to in writing, software
  -  distributed under the License is distributed on an "AS IS" BASIS,
  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  -  See the License for the specific language governing permissions and
  -  limitations under the License.
  -->

<template>
  <div
    class="report padding_deafult"
    id="pdfDom"
  >
    <div class="report-content padding20">
      <div class="logo">
        <img
          src="../../assets/images/logo.png"
          alt=""
        >
        <h3> {{ $t('report.testReport') }}</h3>
        <div>
          <el-button
            v-if="downloadBtn"
            class="common-btn"
            icon="el-icon-download"
            plain
            @click="downLoadReport()"
          >
            {{ $t('report.downloadReport') }}
          </el-button>
        </div>
      </div>
      <p class="reportTitle">
        {{ $t('userpage.platformReport') }}
      </p>
      <div class="baseInfo common-div">
        <div class="title">
          <div class="title-text">
            <span class="titleTextWidth">
              {{ $t('atp.baseInfo') }}
            </span>
          </div>
          <div
            class="backColor"
          />
        </div>
        <div class="report-app-info">
          <el-table
            :data="tableData"
            style="width: 100%"
            header-cell-class-name="caseHearder"
          >
            <el-table-column
              fixed
              prop="appName"
              :label="$t('atp.applicationName')"
            />
            <el-table-column
              prop="appVersion"
              :label="$t('atp.version')"
            />
            <el-table-column
              prop="providerId"
              :label="$t('myApp.provider')"
            />
            <el-table-column
              prop="user.userName"
              :label="$t('report.uploadUser')"
            />
            <el-table-column
              prop="createTime"
              :label="$t('atp.startTime')"
            />
            <el-table-column
              prop="endTime"
              :label="$t('atp.endTime')"
            />
            <el-table-column
              :label="$t('atp.result')"
              width="180"
            >
              <template slot-scope="scope">
                <span
                  :class="scope.row.status==='success'?'success':'failed'"
                >{{ scope.row.status }}</span>
              </template>
            </el-table-column>
          </el-table>
          <img
            :src="resulticon"
            alt=""
            class="resulticon"
          >
        </div>
      </div>
      <div class="report-chart">
        <div
          class="left common-div"
          id="chartwidth"
        >
          <div class="title">
            <div class="title-text">
              <span class="titleTextWidth">
                {{ $t('report.caseDistribution') }}
              </span>
            </div>
            <div
              class="backColor"
            />
          </div>
          <div
            class="sumchart"
            id="leftchart"
          />
        </div>
        <div
          class="right common-div"
          id="chartwidth"
        >
          <div class="title">
            <div class="title-text">
              <span class="titleTextWidth">
                {{ $t('report.successfulRate') }}
              </span>
            </div>
            <div
              class="backColor"
            />
          </div>
          <div
            class="detailchart"
            id="rightchart"
          />
        </div>
      </div>
      <div class="report-detail padding20 common-div">
        <div class="title">
          <div class="title-text">
            <span
              class="titleTextWidth"
            >
              {{ $t('report.reportDetail') }}
            </span>
          </div>
          <div
            class="backColor"
          />
        </div>
        <div
          v-for="(item,index) in testScenarios"
          :key="index"
          class="detail-content"
        >
          <div style="padding:10px 0 0;">
            <span class="scene">{{ language==='cn'?item.nameCh:item.nameEn }}</span>
          </div>
          <el-collapse
            v-model="activeName"
          >
            <el-collapse-item
              v-for="(suiteItem,dex) in item.testSuites"
              :key="dex"
              :title="language==='cn'?suiteItem.nameCh:suiteItem.nameEn"
              :name="item.nameEn+suiteItem.nameEn"
            >
              <el-table
                :data="suiteItem.testCases"
                header-cell-class-name="caseHearder"
              >
                <el-table-column
                  :label="$t('userpage.name')"
                >
                  <template scope="scope">
                    {{ language==='cn'?scope.row.nameCh:scope.row.nameEn }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="result"
                  :label="$t('userpage.result')"
                />
                <el-table-column
                  prop="reason"
                  :label="$t('report.failReason')"
                />
                <el-table-column
                  :label="$t('userpage.type')"
                >
                  <template scope="scope">
                    {{ language==='en'?scope.row.type:scope.row.type==='automatic'?'自动化类型':'手动类型' }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('userpage.description')"
                  width="500"
                >
                  <template scope="scope">
                    {{ language==='cn'?scope.row.descriptionCh:scope.row.descriptionEn }}
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <div v-if="pdfShow">
      <p
        class="reportTitle"
      >
        {{ $t('userpage.applicationReport') }}
      </p>
      <div
        class="pdf-main common-div"
        v-show="printShow"
      >
        <div class="totalnum">
          <span class="curp"> {{ $t('userpage.pageNum') }}:{{ pageNum }}/{{ pageTotalNum }}</span>
        </div>
        <div class="pdf-content">
          <div class="pagearrow">
            <span
              class="el-icon-arrow-left"
              @click.stop="prePage"
            />
          </div>
          <div
            class="pdf"
          >
            <pdf
              ref="pdf"
              :src="pdfUrl"
              :page="pageNum"
              @num-pages="pageTotalNum=$event"
              @error="pdfError($event)"
              @link-clicked="page = $event"
            />
          </div>
          <div class="pagearrow">
            <span
              class="el-icon-arrow-right"
              @click.stop="nextPage"
            />
          </div>
        </div>
      </div>
      <div
        v-show="!printShow"
        style="box-shadow: 0 0 10px 2px #e8e6f1;margin: 20px;"
      >
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="pdfUrl"
          :page="i"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Userpage } from '../../tools/api.js'
import pdf from 'vue-pdf'

export default {
  name: 'Atpreport',
  components: {
    pdf
  },
  data () {
    return {
      testScenarios: [],
      language: localStorage.getItem('language'),
      activeName: [],
      resulticon: '',
      htmlTitle: '',
      currUrl: window.location.href,
      taskId: '',
      scenarioId: '',
      tableData: [],
      chartData: [],
      finishActiveName: [],
      downloadBtn: true,
      interval: '',
      pdfUrl: '',
      pdfShow: true,
      printShow: true,
      pageNum: 1,
      pageTotalNum: 1,
      numPages: 1
    }
  },
  mounted () {
    this.getTaskId()
  },
  beforeDestroy () {
    window.onresize = null
  },
  methods: {
    getTaskId () {
      if (this.currUrl.includes('language')) {
        this.taskId = this.currUrl.split('?')[1].split('=')[1].split('&')[0]
      } else {
        this.taskId = this.currUrl.split('?')[1].split('=')[1]
      }
      this.getReport()
    },
    setBackColorWidth () {
      const titleWidth = document.getElementsByClassName('titleTextWidth')
      const backColorWidth = document.getElementsByClassName('backColor')
      for (let index = 0; index < titleWidth.length; index++) {
        backColorWidth[index].style.width = titleWidth[index].offsetWidth + 'px'
      }
    },
    getReport () {
      Userpage.getTaskApiV2(this.taskId).then(res => {
        this.tableData = []
        let data = res.data.data
        // pdf report
        if (data.reportPath) {
          this.pdfShow = true
          this.pdfUrl = this.currUrl.split('#')[0] + 'mec-atp' + data.reportPath
          this.getNumPages(this.pdfUrl)
        } else {
          this.pdfShow = false
        }
        this.htmlTitle = data.id
        this.tableData.push(data)
        // 基本信息显示
        if (this.tableData[0].status === 'success') {
          this.resulticon = require('../../assets/images/success.png')
        } else {
          this.resulticon = require('../../assets/images/fail.png')
        }
        this.tableData.forEach(item => {
          let newDateBegin = this.dateChange(item.createTime)
          item.createTime = newDateBegin
          let newDateEnd = this.dateChange(item.endTime)
          item.endTime = newDateEnd
        })
        // 测试用例详情
        this.testScenarios = data.testScenarios
        this.activeName = []
        this.finishActiveName = []
        // 获取图表数据
        let chartobj = {
          dataRight: [],
          nameRightCh: [],
          nameRightEn: [],
          dataCh: [],
          dataEn: []
        }
        this.testScenarios.forEach(testScenarios => {
        // 折叠面板打开
          this.activeName.push(testScenarios.nameEn + testScenarios.testSuites[0].nameEn)
          this.activeName.push(testScenarios.nameEn)

          chartobj.nameRightCh.push(testScenarios.nameCh)
          chartobj.nameRightEn.push(testScenarios.nameEn)
          // 图标数据用例个数
          testScenarios.totalNum = 0
          testScenarios.successNum = 0
          testScenarios.failNum = 0
          testScenarios.testSuites.forEach(ele => {
            this.finishActiveName.push(testScenarios.nameEn + ele.nameEn)
            this.finishActiveName.push(testScenarios.nameEn)
            ele.testCases.forEach(item => {
              testScenarios.totalNum++
              if (item.result === 'success') {
                item.reason = '---'
                testScenarios.successNum++
              } else if (item.result === 'failed') {
                testScenarios.failNum++
              }
            })
          })
          let objDataCh = {
            name: '', value: 0
          }
          let objDataEn = {
            name: '', value: 0
          }
          objDataCh.name = testScenarios.nameCh
          objDataEn.name = testScenarios.nameEn
          objDataCh.value = testScenarios.totalNum
          objDataEn.value = testScenarios.totalNum
          chartobj.dataCh.push(objDataCh)
          chartobj.dataEn.push(objDataEn)
          let passRate = Number((testScenarios.successNum / testScenarios.totalNum * 100).toFixed(0))
          chartobj.dataRight.push(passRate)
          this.chartData.push(chartobj)
        })
        this.$nextTick(() => {
          this.drawLeftLine()
          this.drawRightLine()
          this.setBackColorWidth()
        })
      }).catch(() => {
        this.$message({
          duration: 2000,
          showClose: true,
          type: 'warning',
          message: this.$t('promptMessage.getTaskListFail')
        })
      })
    },
    drawLeftLine () {
      let _chart = this.$echarts.init(document.getElementById('leftchart'))
      let colors = ['#3AC372', '#ffd65e', '#616cf7', '#ff509f', '#9ed0c9']
      let option = {
        color: colors,
        legend: {
          top: '0%',
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '测试场景',
            type: 'pie',
            radius: ['30%', '60%'],
            label: {
              formatter: '{b} \n用例数量: {@2012} ({d}%)',
              minMargin: 10,
              edgeDistance: 10,
              lineHeight: 20
            },
            labelLine: {
              show: true,
              length: 30
            },
            data: []
          }
        ]
      }
      if (this.language === 'en') {
        option.series[0].name = 'Test Scenarios'
        option.series[0].data = this.chartData[0].dataEn
        option.series[0].label.formatter = '{b} Cases: {@2012} ({d}%)'
      } else if (this.language === 'cn') {
        option.series[0].name = '测试场景'
        option.series[0].data = this.chartData[0].dataCh
      }
      _chart.setOption(option)
      this.reSizeFun(_chart)
    },
    reSizeFun (_chart) {
      window.addEventListener('resize', () => {
        if (_chart) {
          _chart.resize()
        }
      })
    },
    drawRightLine () {
      let _chart = this.$echarts.init(document.getElementById('rightchart'))
      let option = {
        grid: {
          x: 80,
          y: 20,
          x2: 50,
          y2: 50
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#c77bf4',
          axisPointer: {
            animation: false,
            type: 'line',
            lineStyle: {
              color: '#fff',
              width: 4,
              type: 'dotted',
              opacity: 0.2
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            color: '#fff',
            fontSize: '16'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              type: 'dotted'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value} %',
              color: '#fff',
              fontSize: '16'
            },
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                type: 'dotted'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 2,
                type: 'dashed'
              }
            }
          }
        ],
        series: [{
          data: [],
          type: 'line',
          symbol: 'circle',
          symbolSize: 20,
          lineStyle: {
            color: '#b44ef1',
            width: 2,
            type: 'dashed'
          },
          itemStyle: {
            borderWidth: 4,
            borderColor: '#b44ef1',
            color: '#fff',
            label: { show: true }
          }
        }]
      }
      if (this.language === 'en') {
        option.xAxis.data = this.chartData[0].nameRightEn
        option.series[0].data = this.chartData[0].dataRight
      } else if (this.language === 'cn') {
        option.xAxis.data = this.chartData[0].nameRightCh
        option.series[0].data = this.chartData[0].dataRight
      }
      _chart.setOption(option)
      this.reSizeFun(_chart)
    },

    dateChange (dateStr) {
      if (dateStr) {
        let date = new Date(Date.parse(dateStr))
        let Y = date.getFullYear()
        let M = date.getMonth() + 1
        let D = date.getDate()
        let H = date.getHours()
        let m = date.getMinutes()
        let s = date.getSeconds()
        return Y +
          '-' +
          (M > 9 ? M : '0' + M) +
          '-' +
          (D > 9 ? D : '0' + D) +
          ' ' +
          (H > 9 ? H : '0' + H) +
          ':' +
          (m > 9 ? m : '0' + m) +
          ':' +
          (s > 9 ? s : '0' + s)
      }
    },
    downLoadReport () {
      this.activeName = this.finishActiveName
      this.downloadBtn = false
      this.printShow = false
      let _timer = setTimeout(() => {
        clearTimeout(_timer)
        this.getPdf('#pdfDom')
        this.downloadBtn = true
        this.printShow = true
      }, 1000)
    },
    // pdf
    getNumPages (pdfUrl) {
      this.pdfUrl = pdf.createLoadingTask(pdfUrl)
      this.pdfUrl.promise.then(pdfitem => {
        this.numPages = pdfitem.numPages
      })
    },
    prePage () {
      let p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    nextPage () {
      let p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    pdfError (error) {
      console.error(error)
    }
  },
  watch: {
    '$i18n.locale': function () {
      this.language = localStorage.getItem('language')
      this.getReport()
    }
  }
}
</script>

<style lang='less'>
.report {
  background: #3E279B;
  .report-content {
     .logo {
      display: flex;
      justify-content: space-between;
      height: 65px;
      line-height: 65px;
      img {
        height: 65px;
      }
      h3{
        font-family: sans-serif;
        color: #fff;
        font-size: 24px;
        font-weight: 800;
      }
    }
    .baseInfo{
      margin-bottom: 30px;
      .report-app-info{
        position: relative;
        .el-table tr,.el-table td{
            background-color: transparent;
          }
          .el-table {
            background-color: transparent;
          }
        .resulticon{
          position: absolute;
          right: 20px;
          top: -30px;
        }
        .el-table th,.el-table td{
          border-bottom: none !important;
        }
        .el-table__fixed::before, .el-table__fixed-right::before, .el-table::before{
          width: 0;
        }
      }
    }
    .title {
      font-family: sans-serif;
      font-size: 24px;
      color: #fff;
      padding-bottom: 10px;
      .title-text{
        position: relative;
        z-index: 100;
      }
      .backColor{
          height: 15px;
          border-radius: 10px;
          background-color: #8963c2;
          position: relative;
          top: -10px;
          left: 8px;
      }
    }
      .report-chart{
        display: flex;
        margin-bottom: 30px;
            .left{
              margin-right: 30px;
            }
            .left,.right{
              width: 100%;
            }
            .sumchart{
              width: 100%;
              height: 500px;
            }
            .detailchart{
              width: 100%;
              height: 500px;
            }
      }
    .report-detail{
      .detail-content{
        .scene{
          padding-left: 10px;
          line-height: 40px;
          font-size: 24px;
          font-weight: 600;
          color: #a000ff;
        }
      .el-collapse {
        border: none;
        padding: 0;
        .el-collapse-item {
          margin-bottom: 15px;
          .el-collapse-item__content{
            padding: 0;
          }
          .el-collapse-item__header{
            font-family: defaultFontLight, Arial, Helvetica, sans-serif;
            height: 40px;
            padding-left: 15px;
            font-size: 19px;
            color: #fff;
            background-color: #5F499D;
            border-radius: 19.5px;
            border: none;
          }
          .el-collapse-item__wrap{
            padding-left: 15px;
            background-color: transparent;
            border: none;
          }
        }
      }
        }
    }
          .caseHearder{
            background-color: transparent;
            color: #fff;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            font-family: defaultFontLight, Arial, Helvetica, sans-serif;
            font-size: 16px;
          }
          .el-table tr {
            height: 37px;
            background-color: transparent;
            font-family: defaultFontLight, Arial, Helvetica, sans-serif;
            font-size: 16px;
          }
          .el-table td{
            padding: 0 10px;
            color: #fff;
            vertical-align: top;
            height: 37px;
            line-height: 37px;
            font-family: defaultFontLight, Arial, Helvetica, sans-serif;
            font-size: 16px;
          }
          .el-table__body{
            .cell{
              padding-top: 5px;
            }
          }
         .el-table::before {
          width: 0;
        }
        .el-table{
          background-color: transparent;
          .cell{
            display: table-cell;
            font-family: defaultFontLight, Arial, Helvetica, sans-serif;
            font-size: 16px;
            img{
              vertical-align: middle;
              margin-right: 10px;
              width: 20px;
              height: 20px;
            }
          }
        }
  }
  .pdf-main{
    .totalnum{
      text-align: center;
      font-size: xx-large;
      color: #fff;
    }
    .pdf-content{
      display: flex;
      align-items: center;
      margin: 20px;
      .pagearrow{
        font-size: xxx-large;
        color: #fff;
      }
      .pdf{
        width: 100%;
      }
    }
  }
  .pdfpage{
    text-align: center;
    font-size: xx-large;
    padding-bottom: 20px;
    span{
      padding: 0 20px;
    }
  }
  .reportTitle{
    color: #fff;
    padding: 10px;
    font-size: 30px;
    font-weight: bolder;
  }
}
</style>
